<template>
	<div class="home">
		<lay-swiper :slides="slides" />
		<!--焦点图结束-->
		<div class="category-list">
			<!-- 产品一级分类展示 -->
			<div class="con-box">
				<div class="category-box">
					<nuxt-link v-for="cate in categoryList" :key="cate.id" :to="'/product/'+ cate.id" :title="cate.name">{{ cate.name }}</nuxt-link>
				</div>
			</div>
		</div>
		<!--公司简介-->
		<div class="about-box clearfix">
			<div class="con-box shadow-box">
				<p class="info" v-html="htmlContent">
				</p>
				<div class="learn-more">
          <nuxt-link to="/about" class="btn-more">Learn more</nuxt-link>
				</div>
			</div>
		</div>
		<!--公司简介结束-->
		<!-- 滚动产品 -->
		<div class="product-box">
			<div class="con-box shadow-box">
				<div class="picMarquee-left">
					<div class="bd">
						<div v-if="scrollProducts.length" v-swiper:proSwiper="proSwiperOptions" class="swiper-container">
							<div class="swiper-wrapper">
								<div v-for="product in scrollProducts" :key="product.id" class="swiper-slide">
									<div class="pic"><a :title="product.proName"><img :src="product.pic" /></a></div>
                  <div class="title"><a :title="product.proName">{{ product.proName }}</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 滚动产品结束 -->
		<!-- 合作客户开始 -->
		<div class="partners-box">
			<div class="con-box shadow-box">
				<div class="tit">合作客户：</div>
				<div class="partner-scroll">
					<div class="bd">
						<div v-if="partners.length" v-swiper:partnerSwiper="partnerSwiperOptions" class="swiper-container">
							<div class="swiper-wrapper">
								<div v-for="partner in partners" :key="partner.id" class="swiper-slide">
									<div class="pic"><img :src="partner.imgSrc" /></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 合作客户结束 -->
	</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { LaySwiper } from '@/components/layout'
import { loadSwiperSliders } from '@/store/mutation-types'
import api from '@/api'

// eslint-disable-next-line
let vm

export default {
  components: {
		LaySwiper
	},
  async fetch({ store }) {
    try {
      const resData = await api.focus()
      if (resData.data.errorCode === 0) {
        const slides = resData.data.data
        store.commit({ type: loadSwiperSliders, slides })
      }
    } catch (error) {
      console.log(error)
    }
  },
  async asyncData() {
    try {
      const returnObj = {
        partners: [],
        scrollProducts: []
      }
      const proResData = await api.scrollproduct()
      if (proResData.data.errorCode === 0) {
        returnObj.scrollProducts = proResData.data.data
      }
      const partnerResData = await api.partner()
      if (partnerResData.data.errorCode === 0) {
        returnObj.partners = partnerResData.data.data
      }
      return returnObj
    } catch (error) {

    }
  },
  created() {
    vm = this
  },
	data() {
		return {
			proSwiperOptions: {
				loop: true,
				speed: 1000,
				grabCursor: true,
				parallax: true,
				slidesPerView: 5,
				spaceBetween: 30,
				// loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false
				},
				on: {
					click() {
            const realIndex = this.realIndex
            console.log(vm, realIndex)
						vm.detail(realIndex)
					}
				}
			},
			partnerSwiperOptions: {
				loop: true,
				speed: 2000,
				// grabCursor: true, // 不显示手型
				allowTouchMove: false,
				parallax: true,
				slidesPerView: 8,
				spaceBetween: 30,
				freeMode: true,
				// loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
					delay: 0,
					stopOnLastSlide: false,
					disableOnInteraction: false
				}
			}
		}
  },
  computed: {
    ...mapState(['categoryList', 'slides']),
    ...mapGetters(['htmlContent'])
  },
	methods: {
		detail(index) {
			const product = this.scrollProducts[index]
      this.$router.push(`/detail/${product.id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
/*产品一级分类展示*/
.category-list {
	margin: 20px 0;
}
.category-box {
	font-size: 0;
}
.category-box > a {
	line-height: 40px;
	display: inline-block;
	padding: 0 36px;
	position: relative;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}
.category-box > a:first-child {
	padding-left: 0;
}
.category-box > a:after {
	content: '';
	position: absolute;
	height: 16px;
	width: 2px;
	background-color: #999;
	right: 0px;
	top: 50%;
	margin-top: -8px;
}
.category-box > a:last-child:after {
	width: 0px;
}

/*产品滚动图片*/
.product-box {
	margin: 20px 0 40px;
}
.product-box .con-box {
	padding: 20px;
}
.picMarquee-left {
	overflow: hidden;
	position: relative;
}
.picMarquee-left .bd .pic {
	text-align: center;
}
.picMarquee-left .bd .pic img {
	width: 100%;
	height: 190px;
	display: block;
	padding: 2px;
	border: 1px solid #ccc;
}
.picMarquee-left .bd .pic a:hover img {
	border-color: #999;
}
.picMarquee-left .bd .title {
	line-height: 30px;
	padding: 0 10px;
	background: #ebebeb;
	border: 1px solid #ccc;
	border-top: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*合作客户滚动图片*/
.partners-box {
	margin: 0 0 10px;
}
.partners-box .con-box {
	padding: 0 10px;
	display: flex;
	align-items: center;
}
.partners-box .tit {
	font-size: 16px;
	font-weight: 600;
}
.partner-scroll {
	overflow: hidden;
	position: relative;
	flex: 1;
}
.partner-scroll .bd {
	padding: 10px;
}
.partner-scroll .bd .pic {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 35px;
}
.partner-scroll .bd .pic img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.partner-scroll ::v-deep.swiper-container-free-mode {
	> .swiper-wrapper {
		transition-timing-function: linear; /*之前是ease-out*/
	}
}
</style>
